<template>
	<view class="container">
		<view class="product bg-fff" v-for="(item,index) in productList" :key="index">
			<view class="product-con flex-align-center">
				<image class="product-con-image" :src="item.image.file_path"></image>
				<view class="product-info">
					<view class="product-info-name u-line-1">{{item.product_name}}</view>
					<view class="product-info-suk">{{item.product_attr}}</view>
					<view class="product-info-price"><text>￥</text>{{item.total_pay_price}}</view>
				</view>
			</view>
			
			<view class="rate flex-align-center">
				<view class="rate-title">描述相符：</view>
				<u-rate :count="5" v-model="item.describe_score"></u-rate>
			</view>
			<view class="rate flex-align-center">
				<view class="rate-title">服务态度：</view>
				<u-rate :count="5" v-model="item.server_score"></u-rate>
			</view>
			<view class="rate flex-align-center">
				<view class="rate-title">配送服务：</view>
				<u-rate :count="5" v-model="item.express_score"></u-rate>
			</view>
			
			<view class="score flex-space-between">
				<view class="score-item flex-align-center" :class="{'score-item-smiley': item.score == 10}" @click="handleScore(item, 10)">
					<image style="background: #E80D0D;" :src="$setting.imageUrl()+'Smiley.png'"></image>
					<view class="score-title">好评</view>
				</view>
				<view class="score-item flex-align-center" :class="{'score-item-meh': item.score == 20}" @click="handleScore(item, 20)">
					<image style="background: #F5AA28;" :src="$setting.imageUrl()+'SmileyMeh.png'"></image>
					<view class="score-title">中评</view>
				</view>
				<view class="score-item flex-align-center" :class="{'score-item-sad': item.score == 30}" @click="handleScore(item, 30)">
					<image style="background: #8E8E8E;" :src="$setting.imageUrl()+'SmileySad.png'"></image>
					<view class="score-title">差评</view>
				</view>
			</view>
			
			<view class="content flex">
				<textarea v-model="item.content" placeholder="请输入评价内容"></textarea>
			</view>
			
			<view class="image bg-fff">
				<u-upload 
					width="184rpx" 
					height="184rpx" 
					:header="{'Cookie': 'XDEBUG_TRIGGER=;'}"
					:form-data="{
						token: token,
						app_id: app_id,
					}"
					:max-count="5"
					name="iFile"
					:index="index"
					:action="$setting.baseUrl()+'/file.upload/image'" 
					@on-success="handleUploadSuccess()"
					@on-remove="handleUploadRemove()"></u-upload>
			</view>
			
			<b-u-button-theme width="100%" height="90rpx" @click="send">提交评价</b-u-button-theme>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				app_id: uni.$setting.appId,
				order_id: '',
				productList: [],
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.getHttp();
		},
		methods: {
			send() {
				let formData = [];
				this.productList.forEach((item,index) => {
					formData.push({
						order_product_id: item.order_product_id,
						product_id: item.product_id,
						score: item.score,
						image_list: item.image_list,
						express_score: item.express_score,
						server_score: item.server_score,
						describe_score: item.describe_score,
						content: item.content,
					});
				})
				
				uni.$u.api.postOrderComment({
					order_id: this.order_id,
					formData: JSON.stringify(formData),
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: '提交成功',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack();
								// console.log('用户点击确定');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				})
			},
			handleScore(item, type) {
				item.score = type;
			},
			handleUploadSuccess(e,index, lists, name) {
				this.productList[name].image_list.push(e.data);
			},
			handleUploadRemove(index,lists,name) {
				this.productList[name].image_list.splice(index, 1);
			},
			getOrderComment() {
				uni.$u.api.getOrderComment({order_id: this.order_id}).then(res => {
					this.productList = res.productList;
					this.productList.forEach((item,index) => {
						this.$set(item, 'score', 10);
						this.$set(item, 'image_list', []);
						this.$set(item, 'express_score', 0);
						this.$set(item, 'server_score', 0);
						this.$set(item, 'describe_score', 0);
						this.$set(item, 'content', '');
					});
				})
			},
			getHttp() {
				this.getOrderComment();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		
		.product {
			margin-bottom: 20rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			
			.product-con {
				
				.product-con-image {
					width: 128rpx;
					height: 128rpx;
				}
				
				.product-info {
					margin-left: 16rpx;
					flex: 1;
					
					.product-info-name {
						width: 460rpx;
						font-size: 28rpx;
						color: #111111;
					}
					
					.product-info-suk {
						font-size: 24rpx;
						color: #999999;
					}
					
					.product-info-price {
						margin-top: 8rpx;
						color: #E80D0D;
						font-size: 28rpx;
						
						text {
							font-size: 24rpx;
						}
					}
				}
			}
			
			.rate {
				margin-top: 20rpx;
				
				.rate-title {
					font-size: 28rpx;
					color: #111111;
				}
			}
			
			.score {
				margin-top: 56rpx;
				
				.score-item {
					width: 148rpx;
					height: 64rpx;
					border-radius: 160rpx;
					
					image {
						width: 48rpx;
						height: 48rpx;
						padding: 8rpx;
						border-radius: 50%;
					}
					
					.score-title {
						font-size: 28rpx;
						color: #111111;
						margin-left: 10rpx;
					}
				}
				
				.score-item-smiley {
					background: #E80D0D;
					
					.score-title {
						color: #ffffff;
					}
				}
				
				.score-item-meh {
					background: #F5AA28;
					
					.score-title {
						color: #ffffff;
					}
				}
				
				.score-item-sad {
					background: #8E8E8E;
					
					.score-title {
						color: #ffffff;
					}
				}
			}
			
			.content {
				margin-top: 32rpx;
				
				textarea {
					flex: 1;
					height: 220rpx;
					border-radius: 16rpx;
					padding: 24rpx 30rpx;
					background: #f6f7f8;

				}
			}
			
			.image {
				margin: 32rpx 0;
			}
		}
	}
</style>
